<template>
	<view class="container">
		<!-- 表单部分 -->
		<view v-if="currentTab === 'apply'" class="form">
			<view class="form-item">
				<text>学号</text>
				<input type="text" placeholder="请输入学号" v-model="leaveInfo.sno" />
			</view>
			<view class="form-item">
				<text>姓名</text>
				<input type="text" placeholder="请输入姓名" v-model="leaveInfo.sname" />
			</view>
			<view class="form-item">
				<text>电话</text>
				<input type="text" placeholder="请输入电话" v-model="leaveInfo.phone" />
			</view>
			<view class="form-item">
				<text>班级</text>
				<input type="text" placeholder="请输入班级" v-model="leaveInfo.clazz" />
			</view>
			<view class="form-item">
				<text>请假理由</text>
				<input type="text" placeholder="请输入请假理由" v-model="leaveInfo.reason" />
			</view>
			<view class="form-item">
				<text>审批人</text>
				<input type="text" placeholder="请输入审批人" v-model="leaveInfo.tname" />
			</view>
			<view class="form-item">
				<text>请假类型</text>
				<picker mode="selector" :range="leaveTypes" @change="bindPickerChange">
					<view class="picker">
						{{leaveInfo.type}}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>开始日期</text>
				<picker mode="date" @change="bindStartDateChange">
					<view class="picker">
						{{ leaveInfo.starttime || '请选择开始日期' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>开始时间</text>
				<picker mode="time" @change="bindStartTimeChange">
					<view class="picker">
						{{ leaveInfo.startTime || '请选择开始时间' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>结束日期</text>
				<picker mode="date" @change="bindEndDateChange">
					<view class="picker">
						{{ leaveInfo.endtime || '请选择结束日期' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text>结束时间</text>
				<picker mode="time" @change="bindEndTimeChange">
					<view class="picker">
						{{ leaveInfo.endTime || '请选择结束时间' }}
					</view>
				</picker>
			</view>
			<button @click="submitLeave">申请</button>
		</view>

		<!-- 底部导航 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{'active': currentTab === 'apply'}" @click="switchTab('apply')">申请</view>
			<view class="tab-item" :class="{'active': currentTab === 'view'}" @click="switchTab('view')">查看</view>
		</view>
		<!-- 查看部分 -->
		<view v-if="currentTab === 'view'" class="view">
			<view v-for="(record, index) in leaveRecords" :key="index" class="leave-item" @click="toggleDetail(index)">
				<image :src="isLeave(record.status)"
					:style="{width:setStyle(record.status,'width')+'rpx',height:setStyle(record.status,'height')+'rpx'}"
					mode="" class="statImg"></image>
				<view class="title">姓名：{{record.sname}}</view>
				<view class="contenT" style="margin-top: 20rpx;">
					<text class="text1">学号：</text>
					<text class="text2" style="font-weight: bold;">{{ record.sno }}</text>
				</view>
				<view class="contenT">
					<text class="text1">班级：</text>
					<text class="text2">{{ record.clazz }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">电话：</text>
					<text class="text2">{{ record.phone }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">请假类型：</text>
					<text class="text2">{{ record.type }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">请假理由：</text>
					<text class="text2">{{ record.reason }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">审批人：</text>
					<text class="text2">{{ record.tname }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">开始时间：</text>
					<text class="text2">{{ record.starttime }}</text>
				</view>
				<view v-if="expanded.includes(index)" class="contenT">
					<text class="text1">结束时间：</text>
					<text class="text2">{{ record.endtime }}</text>
				</view>
				<view v-if="record.status === 2" class="contenT" style="margin-top: 20rpx;">
					<text class="text1">备注：</text>
					<text class="text2" style="font-weight: bold;">{{ record.jianjie }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad() {
			this.account = uni.getStorageSync('account');
			console.log(this.account); // 应该能正确打印账号
		},
		data() {
			return {
				leaveInfo: {
					sno: '',
					sname: '',
					phone: '',
					clazz: '',
					reason: '',
					tname: '',
					type: '请选择',
					starttime: '',
					endtime: ''
				},
				leaveRecords: [
					// 这里可以初始化一些请假记录数据
				],
				account: '',
				currentTab: 'apply', // 默认显示申请
				leaveTypes: ['病假', '事假', '其他'], // 请假类型数组
				expanded: [] // 跟踪展开状态
			};
		},
		methods: {
			toggleDetail(index) {
				// 切换展开状态
				if (this.expanded.includes(index)) {
					this.expanded = this.expanded.filter(i => i !== index);
				} else {
					this.expanded.push(index);
				}
			},
			isLeave(status) {
				if (status === 0) return '/uni_modules/leave-list/static/daishenpi.png';
				if (status === 1) return '/uni_modules/leave-list/static/tongguo.png';
				if (status === 2) return '/uni_modules/leave-list/static/bohui.png';
			},
			setStyle(status, type) {
				if (type === 'width') {
					if (status === 0) return 180;
					if (status === 1) return 150;
					if (status === 2) return 160;
				}
				if (type === 'height') {
					if (status === 0) return 160;
					if (status === 1) return 150;
					if (status === 2) return 150;
				}
			},
			leaveDetail(item) {
				this.$emit("leaveDetail", item);
			},
			bindPickerChange(e) {
				this.leaveInfo.type = this.leaveTypes[e.detail.value];
			},
			bindStartDateChange(e) {
				this.leaveInfo.starttime = e.detail.value;
			},
			bindStartTimeChange(e) {
				this.leaveInfo.startTime = e.detail.value;
			},
			bindEndDateChange(e) {
				this.leaveInfo.endtime = e.detail.value;
			},
			bindEndTimeChange(e) {
				this.leaveInfo.endTime = e.detail.value;
			},
			submitLeave() {
				// 确保所有字段都已填写
				if (!this.leaveInfo.sno || !this.leaveInfo.sname || !this.leaveInfo.phone || !this.leaveInfo.clazz ||
					!this.leaveInfo.reason || !this.leaveInfo.tname || this.leaveInfo.type === '请选择' ||
					!this.leaveInfo.starttime || !this.leaveInfo.startTime || !this.leaveInfo.endtime || !this.leaveInfo
					.endTime) {
					uni.showToast({
						icon: 'none',
						title: '请填写所有必填项'
					});
					return;
				}
				// 组合日期和时间
				this.leaveInfo.starttime = `${this.leaveInfo.starttime} ${this.leaveInfo.startTime}`;
				this.leaveInfo.endtime = `${this.leaveInfo.endtime} ${this.leaveInfo.endTime}`;
				// 发送请求到后端API
				uni.request({
					url: 'http://localhost:8085/student/posttakeleave', // 替换为您的后端API地址
					method: 'POST',
					data: this.leaveInfo,
					header: {
						'content-type': 'application/json' // 指定发送数据的格式
					},
					success: (res) => {
						// 处理成功的响应
						if (res.data.success) {
							uni.showToast({
								title: '请假申请提交成功'
							});
							// 清空表单或跳转到其他页面
							this.resetForm();
						} else {
							uni.showToast({
								icon: 'none',
								title: '提交失败，请重试'
							});
						}
					},
					fail: (err) => {
						// 处理请求失败的情况
						console.error('请求失败:', err);
						uni.showToast({
							icon: 'none',
							title: '网络请求失败'
						});
					}
				});
			},
			queryleavelist() {
				uni.request({
					url: 'http://localhost:8085/student/querytakeleave',
					method: 'POST',
					data: {
						account: this.account, // 将学号作为请求参数发送
					},
					success: (res) => {
						console.log('请求成功:', res.data);
						if (res.data.success) {
							this.leaveRecords = res.data.data;
						} else {
							uni.showToast({
								title: '请求失败!!!',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			resetForm() {
				// 重置表单数据
				this.leaveInfo = {
					sno: '',
					sname: '',
					phone: '',
					clazz: '',
					reason: '',
					tname: '',
					type: '请选择',
					starttime: '',
					endtime: ''
				};
			},
			switchTab(tab) {
				this.currentTab = tab;
				if (tab === 'view') {
					this.queryleavelist(); // 当切换到查看标签时，调用 queryleavelist 方法
				}
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.form {
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.form-item text {
		width: 120rpx;

		color: #666;
	}

	.form-item input {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		outline: none;
		box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
		/* 添加淡蓝色荧光效果 */
		transition: box-shadow 0.3s ease;
		/* 添加过渡效果 */
	}


	.form-item input:focus {
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
		/* 聚焦时增强荧光效果 */
	}

	.picker {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		background-color: #f8f8f8;
		outline: none;
		box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
		/* 添加淡蓝色荧光效果 */
		transition: box-shadow 0.3s ease;
		/* 添加过渡效果 */
	}

	.picker:focus {
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
		/* 聚焦时增强荧光效果 */
	}

	button {
		background-color: #007AFF;
		/* 蓝色按钮 */
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
		border: none;
		outline: none;
		cursor: pointer;
		transition: background-color 0.3s ease;

		&.active {
			background-color: darken(#007AFF, 10%);
		}
	}

	.tab-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top: 1px solid #ccc;
		padding: 20rpx 0;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		z-index: 10;
		/* 确保底部导航在最上层 */
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		padding: 10rpx 0;

		&.active {
			color: #007AFF;
			/* 激活状态的颜色 */
		}
	}


	.view {
		margin: 20rpx;
	}

	.leave-item {
		background-color: #ffffff;
		width: 100%;
		border-radius: 25rpx;
		padding: 20rpx;
		box-sizing: border-box;
		letter-spacing: 2rpx;
		position: relative;
		margin-bottom: 30rpx;
		transition: box-shadow 0.3s ease;
		/* 添加过渡效果 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 165, 0, 0.5);
		/* 添加淡橘黄色的荧光效果 */
	}

	.statImg {
		position: absolute;
		right: 0;
		top: 0rpx;
		transform: rotate(50deg);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.contenT {
		padding: 10rpx 0;
	}

	.text1 {
		color: rgba(0, 0, 0, 0.7);
	}

	.text2 {
		color: #000000;
		letter-spacing: 0rpx;
	}
</style>